<template>
  <div>
    <div v-if="!showDetail && !showAdd" class="app-container">
      <div style="margin-left:20px">
        <el-form label-position="left" label-width="60px" inline size="small" >

          <el-form-item label="项目" >
            <el-select v-model="filterForm.projectId" filterable clearable>
              <el-option v-for="item in projects" :key="item.projectId" :label="item.projectName" :value="item.projectId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学期" >
            <el-select v-model="filterForm.semesterId" filterable clearable>
              <el-option v-for="item in semesters" :key="item.id" :label="item.semesterName" :value="item.id"/>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="项目、学期" >
            <el-select v-model="queryForm.projectPhase" filterable >
              <el-option v-for="item in projectPhases" :key="item.id" :label="item.projectName + ' - ' + item.semesterName" :value="item.id"/>
            </el-select>
          </el-form-item> -->
        </el-form>

        <!-- <el-form label-position="left" label-width="60px" inline size="small" >
          <el-form-item label="" >
            <el-input v-model="queryInfo" style="width: 300px;" placeholder="请输入名称查询" @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="" >
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form> -->
        <el-form label-position="left" label-width="80px" inline size="small" >
          <el-form-item label="资助状态" >
            <el-select v-model="filterForm.aidStatus" filterable clearable style="width:120px">
              <el-option v-for="item in studentAidStatuses" :key="item.code" :label="item.name" :value="item.code"/>
            </el-select>
          </el-form-item>
          <el-form-item label="资助类型" >
            <el-select v-model="filterForm.aidType" filterable clearable style="width:120px">
              <el-option v-for="item in studentAidTypes" :key="item.code" :label="item.name" :value="item.code"/>
            </el-select>
          </el-form-item>
          <el-form-item label="结对进展" >
            <el-select v-model="filterForm.pairStatus" filterable clearable style="width:120px">
              <el-option v-for="item in studentPairStatuses" :key="item.code" :label="item.name" :value="item.code"/>
            </el-select>
          </el-form-item>
          <el-form-item label="捐款进展" >
            <el-select v-model="filterForm.donateStatus" filterable clearable style="width:120px">
              <el-option v-for="item in donateStatuses" :key="item.code" :label="item.name" :value="item.code"/>
            </el-select>
          </el-form-item>

        </el-form>
      </div>

      <data-table
        ref="dataTable"
        :key="tableKey"
        :border="false"
        :stripe="true"
        :url="url"
        :params="params"
        row-key="id"
        size="small"
        style="width: 100%;">

        <el-table-column label="编号" prop="studentSn" align="center" width="100px" sortable/>
        <el-table-column label="姓名" prop="studentName" align="center" width="100px" sortable/>
        <el-table-column label="性别" prop="studentGender" align="center" width="80px"/>
        <el-table-column label="学校" prop="school" align="center" min-width="100px"/>
        <el-table-column label="年级" prop="gradeName" align="center" width="80px" />
        <el-table-column label="是否资助" prop="aidStatusName" align="center" width="80px" />
        <el-table-column label="资助金额" prop="aidAmount" align="center" width="100px" />
        <el-table-column label="资助类型" prop="aidTypeName" align="center" width="100px" />
        <el-table-column label="资助人" prop="sponsorName" align="center" width="100px" />
        <el-table-column label="捐款" prop="donateStatusName" align="center" width="100px" />
        <el-table-column label="收据反馈" prop="receiptFeedbackStatusName" align="center" width="100px" />

        <el-table-column label="志愿者" prop="volunteerName" align="center" width="100px" />
        <el-table-column v-if="canEdit" label="操作" align="center" width="100px" class-name="small-padding fixed-width" >
          <template slot="header" slot-scope="scope">
            <el-button v-if="canAdd" type="text" size="mini" @click="handleCreate">添加</el-button>
            <template v-else>{{ scope.column.label }}</template>
          </template>
          <template slot-scope="scope" >
            <el-button v-if="canUpdate" type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <confirm-poptip v-if="canDelete" type="text" size="mini" @on-ok="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </data-table>
    </div>
    <div v-if="showDetail" class="createPost-container">
      <div style="width:100%;" />
    </div>
    <div v-if="showAdd" class="createPost-container">
      <div style="width:100%;" />
    </div>
  </div>
</template>

<script>
import { getProjectPhases, getStudentsAids } from '@/api/aidTrack'
import { getStudentAidStatuses, getStudentAidTypes, getStudentPairStatuses, getDonateStatuses, getFundStatuses, getStudentFeedbackStatuses, getSponsorFeedbackStatuses } from '@/api/public'
import waves from '@/directive/waves' // 水波纹指令
import { canAdd, canUpdate, canDelete } from '@/utils'

export default {
  name: 'Pair',
  directives: {
    waves
  },
  components: { },
  filters: {
  },
  data() {
    return {
      controllerName: 'students-aids',
      filterForm: {
        projectId: null,
        semesterId: null,

        aidStatus: null,
        aidType: null,
        pairStatus: null,
        donateStatus: null,
        fundStatus: null,
        receiptStatus: null,
        summaryStatus: null,
        receiptFeedbackStatus: null,
        summaryFeedbackStatus: null
      },
      params: {

      },
      projectPhases: [],
      projects: [],
      semesters: [],
      studentAidStatuses: [],
      studentAidTypes: [],
      studentPairStatuses: [],
      donateStatuses: [],
      fundStatuses: [],
      studentFeedbackStatuses: [],
      sponsorFeedbackStatuses: [],
      url: '/students-aids',
      showDetail: false,
      showAdd: false,
      detailId: null,
      tableKey: 0,
      queryInfo: null
    }
  },

  computed: {
    canEdit() {
      return this.canAdd || this.canUpdate || this.canDelete
    },
    canAdd() {
      return canAdd(this.$store.state, this.controllerName)
    },
    canUpdate() {
      return canUpdate(this.$store.state, this.controllerName)
    },
    canDelete() {
      return canDelete(this.$store.state, this.controllerName)
    },
    selectProjectId() {
      return this.filterForm.projectId
    },
    selectSemesterIdId() {
      return this.filterForm.semesterId
    }
  },
  watch: {
    selectProjectId(val) {
      this.filterForm.semesterId = null
      const list = this.projectPhases.filter(d => d.projectId === val)
      this.semesters = list
    },
    selectSemesterIdId() {
      // this.params = Object.assign({}, this.filterForm)
    },
    filterForm: {
      deep: true,
      handler: function(newVal, oldVal) {
        this.params = Object.assign({}, this.filterForm)
      }
    }
  },
  created() {
    this.getPublicData()
    // this.getList()
  },
  methods: {
    getPublicData() {
      this.getProjectPhases()
      this.getStudentAidStatuses()
      this.getStudentAidTypes()
      this.getStudentPairStatuses()
      this.getDonateStatuses()
      this.getFundStatuses()
      this.getStudentFeedbackStatuses()
      this.getSponsorFeedbackStatuses()
    },
    getProjectPhases() {
      getProjectPhases().then((res) => {
        this.projectPhases = res.data
        const projects = []
        for (const item of res.data) {
          if (projects.filter(d => d.projectId === item.projectId).length <= 0) {
            projects.push({
              projectId: item.projectId,
              projectName: item.projectName }
            )
          }
        }
        this.projects = projects
      })
    },
    getStudentAidStatuses() {
      getStudentAidStatuses().then((res) => {
        this.studentAidStatuses = res.data
      })
    },
    getStudentAidTypes() {
      getStudentAidTypes().then((res) => {
        this.studentAidTypes = res.data
      })
    },
    getStudentPairStatuses() {
      getStudentPairStatuses().then((res) => {
        this.studentPairStatuses = res.data
      })
    },
    getDonateStatuses() {
      getDonateStatuses().then((res) => {
        this.donateStatuses = res.data
      })
    },
    getFundStatuses() {
      getFundStatuses().then((res) => {
        this.fundStatuses = res.data
      })
    },
    getStudentFeedbackStatuses() {
      getStudentFeedbackStatuses().then((res) => {
        this.studentFeedbackStatuses = res.data
      })
    },
    getSponsorFeedbackStatuses() {
      getSponsorFeedbackStatuses().then((res) => {
        this.sponsorFeedbackStatuses = res.data
      })
    },
    handleQuery() {
      this.$refs.dataTable.setQuery(this.queryInfo)
    },

    handelReturn() {
      this.showDetail = false
      this.showAdd = false
      // this.getList()
    },

    handleCreate() {
      // this.showAdd = true
    },
    handleUpdate(row) {
      // this.showDetail = true
      // this.detailId = row.id
    }

  }
}

</script>
